<template>
  <div>
    <div>
      <el-input v-model="str" placeholder="根据属性名查询" style="width: 300px; position: absolute; left: 270px;"></el-input>
      <el-button @click="so" style="position: absolute;left: 600px;">查询</el-button>
      <el-button @click="addConf" style="position: absolute;left: 670px;">新增</el-button>
      <el-button @click="deleteConf" style="position: absolute;left: 750px;">删除</el-button>
      <el-button @click="reload" style="position: absolute;left: 830px;">刷新</el-button>
    </div>
    <div class="table1">
      <el-table :data="findConfInfo" border ref="multipleTable"
        @selection-change="handleSelectionChange">
        <!-- 表格中多选框组件 -->
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="attrName" label="属性名称" width="140">
        </el-table-column>
        <el-table-column prop="attrType" label="属性是否可选" :formatter="attrTypeFormat" width="140">
        </el-table-column>
        <el-table-column prop="putType" label="录入方式" width="120">
        </el-table-column>
        <el-table-column prop="options" label="可选值列表" width="200">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="updateConf(scope.row.attrCode)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="findConfPageInfo.current" :page-sizes="[1,2,3]" :page-size="findConfPageInfo.size"
        layout="total, sizes, prev, pager, next, jumper" :total="findConfPageInfo.total">
      </el-pagination>
    </div>
    <!-- 修改 -->
    <el-dialog title="属性参数修改" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">

      <el-form :model="UpdateConfForm" :rules="rules" ref="UpdateConfForm" label-width="120px">
        <el-form-item label="属性名" prop="attrName" style="width: 350px;">
          <el-input v-model="UpdateConfForm.attrName"></el-input>
        </el-form-item>
        <el-form-item label="属性是否可选" prop="attrType">
          <el-radio-group v-model="UpdateConfForm.attrType" style="position: absolute; left: 20px; top: 10px;">
            <el-radio label="1">唯一属性</el-radio>
            <el-radio label="2">单选属性</el-radio>
            <el-radio label="3">复选属性</el-radio>
            <el-radio label="4">自定义属性</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可选列表" prop="options">
            <el-input type="textarea" v-model="UpdateConfForm.options"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm2('UpdateConfForm')">提交</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qx2">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 新增 -->
    <el-dialog title="属性参数新增" :visible.sync="dialogVisible1" width="50%" :before-close="handleClose">

      <el-form :model="saveConfForm" :rules="rules" ref="saveConfForm" label-width="120px">
        <el-form-item label="属性名" prop="attrName" style="width: 350px;">
          <el-input v-model="saveConfForm.attrName"></el-input>
        </el-form-item>
        <el-form-item label="属性是否可选" prop="attrType">
          <el-radio-group v-model="saveConfForm.attrType" style="position: absolute; left: 20px; top: 10px;">
            <el-radio label="1">唯一属性</el-radio>
            <el-radio label="2">单选属性</el-radio>
            <el-radio label="3">复选属性</el-radio>
            <el-radio label="4">自定义属性</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可选列表" prop="options">
            <el-input type="textarea" v-model="saveConfForm.options" placeholder="例如:红,黑,灰"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('saveConfForm')">提交</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name:"parameter",
    data(){
      return{
        groupCode:"",
        str:"",
        findConfInfo:[],
        findConfPageInfo:{},
        ischecked:[],
        dialogVisible:false,
        dialogVisible1:false,

        saveConfForm:{
          attrName:"",
          attrType:"",
          options:"",
        },
        UpdateConfForm:{
          attrCode:"",
          attrName:"",
          attrType:"",
          options:"",
        },
        rules: {
          attrName: [{
              required: true,
              message: '请输入属性名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 5,
              message: '长度在 2 到 5 个字符',
              trigger: 'blur'
            }
          ],
          attrType: [{
            required: true,
            message: '属性是否可选',
            trigger: 'change'
          }],
          options: [{
            required: true,
            message: '添加参数列表',
            trigger: 'blur'
          }],
        }
      }
    },
    methods:{
      //新增
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //不为空发送新增请求
            this.$http.post("pawnAttrConf/saveConf",{groupCode:this.groupCode,attrName:this.saveConfForm.attrName,attrType:this.saveConfForm.attrType,options:this.saveConfForm.options}).then(resp=>{
              alert(resp.data.message);
              location.reload();
            })
          } else {
            return false;
          }
        });
      },
      addConf(){
        this.dialogVisible1 = true;
      },
      qx(){
        this.dialogVisible1 = false;
        location.reload();
      },
      //修改
      submitForm2(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //不为空发送修改请求
            this.$http.post("pawnAttrConf/updateConf", this.UpdateConfForm).then(resp => {
              alert(resp.data.message);
              location.reload();
            })
          } else {
            return false;
          }
        });
      },
      updateConf(attrCode){
        this.UpdateConfForm.attrCode = attrCode;
        this.dialogVisible = true;
        this.getConfByAttrCode();
      },
      getConfByAttrCode(){
        this.$http.get("pawnAttrConf/getConfByAttrCode",{params:{attrCode:this.UpdateConfForm.attrCode}}).then(resp=>{
          this.UpdateConfForm = resp.data.data;
          console.log(this.UpdateConfForm);
        })
      },
      handleClose(done) {
        location.reload();
      },
      qx2() {
        this.dialogVisible = false;
        location.reload();
      },
      attrTypeFormat(row,column){
        if(row.attrType=="1"){
          return "唯一属性";
        }else if(row.attrType=="2"){
          return "单选属性";
        }else if(row.attrType=="3"){
          return "复选属性";
        }else{
          return "自定义属性";
        }
      },
      deleteConf(){
        this.$http.post("pawnAttrConf/deleteByChecked",{isChecked:this.ischecked}).then(resp=>{
          alert(resp.data.message);
          location.reload();
        })
      },
      handleSelectionChange(val){
        this.ischecked = val;
      },
      getConfByLike(currentPage, pagesize){
        this.$http.get("pawnAttrConf/getConfByLike",{params: {
            groupCode:this.groupCode,
            current: currentPage,
            size: pagesize,
            str:this.str
          }}).then(resp=>{
            this.findConfPageInfo = resp.data.data;
            this.findConfInfo = resp.data.data.records;
          })
      },
      so(){
        this.getConfByLike(1,1);
      },
      handleCurrentChange(current) {
        if (this.str == "") {
          this.getAllConfByGroupCode(current, this.findConfPageInfo.size);
        } else {
          this.getConfByLike(current, this.findConfPageInfo.size);
        }
      },
      handleSizeChange(size) {
        if (this.str == "") {
          this.getAllConfByGroupCode(this.findConfPageInfo.current, size);
        } else {
          this.getConfByLike(this.findConfPageInfo.current, size);
        }
      },
      reload() {
        location.reload();
      },
      getAllConfByGroupCode(currentPage, pagesize){
        this.$http.get("pawnAttrConf/getAllConfByGroupCode",{params: {
            groupCode:this.groupCode,
            current: currentPage,
            size: pagesize
          }}).then(resp=>{
            this.findConfPageInfo = resp.data.data;
            this.findConfInfo = resp.data.data.records;
          })
      },
      getGroupCode(){
        let s = localStorage.getItem("groupCode");
        let group = JSON.parse(s);
        this.groupCode = group;
      }
    },
    created() {
      this.getGroupCode();
      this.getAllConfByGroupCode(1,2);
    }
  }
</script>

<style>
  .table1 {
    position: absolute;
    top: 100px;
    left: 150px;
  }

  .block {
    position: absolute;
    top: 350px;
    left: 300px;
  }
</style>
